<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" />
   <link rel="stylesheet" href="${ctxPath}/static/css/table.css" />
   <title>房间列表</title>
   <script src="${ctxPath}/static/layui/layui.js"></script>
   <script src="${ctxPath}/static/js/jquery-3.6.1.min.js"></script>
</head>
<body>
	<!-- {1}放置搜索栏 【018行】 -->
<form class="layui-form">
	 <div class="layui-form-item" style="margin-bottom:5px;">
	 
	 
	 
	     <div class="layui-form-item" style="display:inline-block">
    	 <div class="layui-inline">
		  <label class="layui-form-label" style="width:100px;">
			房间类型
		  </label>
		  <div class="layui-input-inline">
			<select name="frmTypeId" id="frmTypeId">
			
			</select>
		  </div>
		</div>
     </div>
     
     
     
     
     	     <div class="layui-form-item" style="display:inline-block">
    	 <div class="layui-inline">
		  <label class="layui-form-label" style="width:100px;">
			楼层
		  </label>
		  <div class="layui-input-inline">
			<select name="frmStoreyId" id="frmStoreyId">
			
			</select>
		  </div>
		</div>
     </div>
     
     
     
     
	    <div class="layui-inline">
	      <label class="layui-form-label">状态</label>
	      <div class="layui-input-inline">
	        <input type="text" name="frmStatus" id="frmStatus" 
	        	autocomplete="off" class="layui-input">
	      </div>
	    </div>
	
	<button type="button" 
		class="layui-btn" onclick="doSearch();"
		style="margin-left:10px;">立即搜索</button>
	<button type="button" 
		class="layui-btn layui-btn-normal"
		style="margin-left:10px;"
		onclick="reloadPage();">重置</button>
</div>
</form>
	
	
	

	<!-- {2}放置动态表格 -->
    <table class="layui-hide" id="demo" lay-filter="test">
    </table>
    
	<!-- {3}表格工具栏 -->
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

</body>
<script src="${ctxPath}/static/js/form.js"></script>

<script>
function updateSelect(id){
	var $sel = $( id );
	var $dd = $sel.parent().find("dd");
	for(var idx=0; idx<$dd.size(); idx++){
		var obj = $dd[ idx ];
		if( $(obj).hasClass('layui-this') ){
			var op = $( id +" option")[idx];
			$(op).attr("selected",true);
		}
	}
}



//{2}定义一个搜索项目的数组
var schFlds = ['typeId','storeyId','status'];
var preFix = "frm";

//nickName, no,..
//转化名字: frmNickName
function getFrmName( key ){
	var first = key.substring(0,1);
	var tail = key.substring(1,key.length);
	return preFix + first.toUpperCase() + tail;
}

function doSearch(){
	//{1}创建一个条件对象。
	var cond = {};
	//{2}遍历数组, 把要搜索的栏目存入到  cond 条件
	for(var i=0; i<schFlds.length; i++){
		var fld = schFlds[i];         //nickName
		var frmFld = getFrmName(fld); //frmNickName
		var val = $("#"+frmFld).val();
		if( val.length>0 ){
			cond[ fld ] = val;
		}
	}
	console.log( cond );
	//userTbl: 288行中设置表格ID [指明要更新哪个表格]
	var ran = parseInt(Math.random()*1000000);
	layui.table.reload(
			'userTbl',
			{
				url:'${ctxPath}/Room/jsonList?ran='+ ran,
				where:cond,
				page:{ curr:1 }
			}
	);
}


</script>
<script>
/* ----------------------- 自定义相关数据与方法 -------------------------  */
//下拉菜单的选项数据

var data_aa = [
	{text:'请选择房间类型',val:''},
]


var gInputs = [
	{title:'房间号',name:'roomNo',type:'text',readonly:'readonly'},
	{title:'房间类型',name:'typeId',type:'select',options:data_aa},
	{title:'状态',name:'status',type:'text'},
	{name:'id',type:'hide'}
];



function showPopBox( user ){
	var HTML = makeTable( gInputs, user );
	layer.open({
		 type: 1
		 ,title: '编辑数据'      //显示标题栏
		 ,closeBtn: false
		 ,area: ['450px','380px']
		 ,shade: 0
		 ,id: 'LAY_layuipro'   //设定一个 id, 防止重复弹出
		 ,btn: ['保存数据', '关闭对话框']  //{ps} 两个按钮
		 ,btnAlign: 'c'        //居中对齐
		 ,moveType: 1          //拖拽模式, 0 或者 1
		 ,content: HTML        //这是上面生成的表格 html 代码
		 ,yes: function(){		   
			  saveUser();   //调用保存用户
		 }
		 ,success: function(layero){
			 //--暂时不写代码--
		 }
	});
}

//[165行附近]设置要抓取表单项目
//用在点击提按钮时, 保存用户数据.
var items = ['id', 'typeId', 'status'];

function editRoom( _id ){
	$.ajax({
		url:'${ctxPath}/Room/getRoom?id='+ _id,
		type:'get',		
		dataType:'json',
		success:function(resp){
			var ret = resp['result'];
			if(ret=='success'){
				showPopBox( resp['data'] );
			}else{
				layer.msg("获取房间失败:"+ resp.cause);
			}
		}
	});
}

function saveUser(){
	//{1}抓取表单数据。
	var user = pickData( items );
	//{2}你要测试这里有没有输出数据。
	console.log( user );
	
	//{2}用 ajax 提交表单。
	$.ajax({
		url:'${ctxPath}/Room/saveRoom',
		type:'post',
		data: user,
		dataType:'json',
		success:function(resp){
			var ret = resp['result'];
			if(ret=='success'){
				layer.msg('保存数据成功。');
				//{ps}2秒后, 重载此页。
				setTimeout( reloadPage, 2000 );
			}else{
				layer.msg('保存数据失败, 原因:'+ resp.cause);
			}
		}		
	});
}
function reloadPage(){
	window.location = "${ctxPath}/Room/viewList";
}





//==============================================================
$.ajax({
	url:'${ctxPath}/RoomType/jsonList',
	type:'get',		
	dataType:'json',
	success:function(resp){
		var json = resp['data'];
		for(let i =0;i<json.length;i++)
			{
			let obj = {};
			obj.text=json[i].typeName;
			obj.val = json[i].id;
			data_aa.push(obj);
			
			}
	}
});


function delRoom(_id){
	$.ajax({
		url:'${ctxPath}/Room/delRoom?id='+ _id,
		type:'get',		
		dataType:'json',
		success:function(resp){
			var ret = resp['result'];
			if(ret=='success'){
				setTimeout( reloadPage, 2000 );
				layer.msg("删除房间成功:"+ resp['data']);
			}else{
				setTimeout( reloadPage, 2000 );
				layer.msg("删除房间失败:"+ resp.cause);
			}
		}
	});
}







window.onload = function(){
	 getRoomTypeOption();
	 getStoreyOption();
}



function getRoomTypeOption(){
	 $.ajax({
	  url:'${ctxPath}/Option/getRoomType',
	  type:'get',
	  dataType:'json',
	  success:function(resp){
	   var ret = resp['result'];

	   if(ret=='success'){
	    var $role = $('#frmTypeId');
	    updateSelect(resp.data, $role);
	    console.log(resp.data);
	   }else{
	    layer.msg('保存下拉菜单失败, 原因：' +  resp.cause);
	   }
	  }
	 });
}

function getStoreyOption(){
	 $.ajax({
	  url:'${ctxPath}/Option/getStorey',
	  type:'get',
	  dataType:'json',
	  success:function(resp){
	   var ret = resp['result'];

	   if(ret=='success'){
	    var $role = $('#frmStoreyId');
	    updateSelect(resp.data, $role);
	    console.log(resp.data);
	   }else{
	    layer.msg('保存下拉菜单失败, 原因：' +  resp.cause);
	   }
	  }
	 });
}




	 var first = {text:'请选择类型',text:''};

		function updateSelect(list, $sel){
			list.unshift(first);
		 var html = "";
		 $.each(list, function(index,obj){
		  html += makeOption(obj);
		 });
		 $sel.html( html );
		 layui.form.render('select');
		}

		function makeOption( op ){
		 return "<option value=\"" + op.text +
		   "\">" + op.text + "</option>";
		}









</script>

<script>
/* ----------------------- LayUI 所有组件-------------------------  */
//{1}为了更新 js 缓存，可忽略
layui.config({
  version: '1554901098009' 
});

//{2}声明 LayUI 使用哪些组件。
layui.use(
	[ 'laypage', 'layer', 'table', 'element' ], 
	function(){
	  var laypage = layui.laypage //分页
	  ,layer = layui.layer       //弹层
	  ,table = layui.table       //表格
	  ,element = layui.element;  //元素操作
	
	//{A}动态表格
  var ran = Math.random();
  table.render({
    elem: '#demo'
    ,height: 380
    ,url: '${ctxPath}/Room/jsonList?ran='+ ran   //数据接口
    ,title: '房间表'
    ,page: true     //{ps} 开启分页
    ,id: 'userTbl'
     //{ps} 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
     //toolbar: 'default'
    ,totalRow: false   //{ps} 开启合计行
    ,cols: [[          //{ps} 表头
      {type: 'checkbox', fixed: 'left'}, 
      
   
 
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
      {field: 'roomNo', title: '房间编号', width:100, fixed: 'left'},
      {field: 'typeId', title: '房间类型', width:100, fixed: 'left'},
      {field: 'storeyId', title: '楼层', width:100, fixed: 'left'},
      {field: 'descript', title: '楼层概述', width:100, fixed: 'left'},
      {field: 'status', title: '状态', width:100, fixed: 'left'},
      {fixed: 'right', width: 185, align:'center', toolbar: '#barDemo'}
    ]]
  });

  //---------------在这里加入其它的组件----------------
	table.on('tool(test)', function(obj){  
		var data = obj.data     //获得当前行数据
		, layEvent = obj.event; //获得 lay-event 对应的值
		if(layEvent === 'del'){
		   //----在这里添加处理代码----
		   delRoom(data['id']);
		} else if(layEvent === 'edit'){
		   //data['id']: 获取表格中的 id
		   editRoom( data['id'] );
		}
	});
	  
});
</script>
</html>